<!--
 * @Author: 胡晓星
 * @Date: 2024-08-08 11:51:01
 * @LastEditors: 491256909@qq.com
 * @LastEditTime: 2025-08-14 23:15:33
 * @FilePath: \src\pages\points\index.vue
 * @Description: 
-->
<script setup lang="ts">
import { pointsData } from 'mock/pointsData'
definePage({
  name: 'points',
  meta: {
    level: 2,
    title: '📊 小组积分榜',
    i18n: 'home.points',
  },
})

const pointsDatas = pointsData
console.log(pointsDatas)

const groupA = pointsDatas.groupA.sort(function (a, b) {
    return b.fail - a.fail;
}).sort(function (a, b) {
    return b.netWin - a.netWin;
}).sort(function (a, b) {
    return b.win - a.win;
});
const groupB = pointsDatas.groupB.sort(function (a, b) {
    return b.fail - a.fail;
}).sort(function (a, b) {
    return b.netWin - a.netWin;
}).sort(function (a, b) {
    return b.win - a.win;
});

// function fnGetPointsData() {
//   queryPointsData().then(({ code, result }) => {
//   console.log(100,code,result)
//     if (code === 0)
//       pointsDatas = result
//   console.log(1,result)
//   })
// }
// fnGetPointsData()

</script>

<template>
  <Container>
    <div class="data-content-title">A组</div>
    <div class="data-content">
      <van-row class="content-item data-content-header">
                <van-col class="item-name" span="8">球队</van-col>
                <van-col class="item-win" span="4">胜场</van-col>
                <van-col class="item-fail" span="4">负场</van-col>
                <van-col class="item-netWin" span="4">净胜分</van-col>
                <!-- <van-col class="item-point" span="4">积分</van-col> -->
            </van-row>
            <van-row class="content-item  data-content-body" v-for="item in groupA" :key="item.name">
                <van-col class="item-name" span="8">{{item.name}}</van-col>
                <van-col class="item-win" span="4">{{item.win}}</van-col>
                <van-col class="item-fail" span="4">{{item.fail}}</van-col>
                <van-col class="item-netWin" span="4">{{item.netWin}}</van-col>
                <!-- <van-col class="item-point" span="4">{{item.points}}</van-col> -->
            </van-row>
     
    </div>
    <div class="data-content-title data-content-titleB">B组</div>
    <div class="data-content data-contentB">
      <van-row class="content-item data-content-header">
                <van-col class="item-name" span="8">球队</van-col>
                <van-col class="item-win" span="4">胜场</van-col>
                <van-col class="item-fail" span="4">负场</van-col>
                <van-col class="item-netWin" span="4">净胜分</van-col>
                <!-- <van-col class="item-point" span="4">积分</van-col> -->
            </van-row>
            <van-row class="content-item  data-content-body" v-for="item in groupB" :key="item.name">
                <van-col class="item-name" span="8">{{item.name}}</van-col>
                <van-col class="item-win" span="4">{{item.win}}</van-col>
                <van-col class="item-fail" span="4">{{item.fail}}</van-col>
                <van-col class="item-netWin" span="4">{{item.netWin}}</van-col>
                <!-- <van-col class="item-point" span="4">{{item.points}}</van-col> -->
            </van-row>
    
    </div>
  </Container>
</template>

<style lang="less" scoped>
.data-content-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  padding: 10px 0;
  margin: 10px 0 5px;
  background: #c2e8ff;
  text-align: center;
  border-radius: 8px;
  &.data-content-titleB {
    margin-top: 20px;
    background: #e5d0fb;
  }
}
.data-content {
  border-radius: 8px;
  .content-item{
    background: #eef9ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
      font-size: 14px;
      text-align: center;
    .item-name {
      width: 40%;
      font-size: 16px;
      color: #333;
    }
    .item-win {
      width: 20%;
    }
    .item-fail {
      width: 20%;

    }
    .item-point {
      width: 20%;
    }
  }
  .data-content-header{
    background: #99dafd;
    .item-name {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .data-content-body {
    border-top: 1px solid #fff;
    .item-name {
      font-size: 16px;
      color: #333;
    }
    .item-win {
      color: green;
    }
    .item-fail {
      color: red;

    }
    .item-netWin{
      color: #333;
    }
    .item-point {
      font-weight: bold;
      font-size: 16px;
    }
    &:nth-child(-n+3) {
      background: #bce8fe;
    }
  
  }
  &.data-contentB{
    .content-item{
      background: #eeddff;
    }
    .data-content-header{
      background: #cfa4fa;
    }
    .data-content-body {
      &:nth-child(-n+3) {
        background: #dbbcfe;
      }
    }
  }
  
}
</style>
